/*
 * 可复用的公有布局
 */
//  注册和登录
body.from {
    background: url(../../assets/imgs/123.jpg) no-repeat;
    background-size: cover;
    padding: 30px;

    & p:nth-of-type(2) {
        color: #cec8d3;
    }

    & p:nth-last-of-type(1) {
        bottom: 10%;
        left: 50%;
        transform: translateX(-50%);
    }

    & p:nth-last-of-type(2) {
        line-height: 18px;

        button {
            background-color: transparent;
            top: 50%;
            right: 50%;
            transform: translate(50%, -50%);
        }
    }

    input {
        width: 100%;
        height: 40px;
        border-radius: 20px;
        background: rgba(204, 204, 204, 0.5);
        border: 0;
        color: white;
        outline: none;
        padding-left: 10px;

        &::placeholder {
            color: #cec8d3;
        }
    }

    .authCode {
        input {
            flex: 6;
            margin-right: 10px;
        }

        canvas {
            flex: 4;
            height: 40px;
        }
    }

    .reg-btn {
        width: 100%;
        height: 40px;
        border: 0;
        line-height: 40px;
        background: rgba(100, 156, 110, 0.7);
        border-radius: 20px;
    }

}

.head {
    background-color: #fff;
    width: 100%;
    height: 55px;
    position: fixed;
    top: -20px;
    left: 0;

    ul {
        li {
            line-height: 55px;
            a{
                color: #000;
            }
        }

        .active {
            color: #4294FF;
            border-bottom: 1px solid #4294FF;
        }
    }
}

// 底部样式
footer {
    background-color: #fff;

    ul {
        box-shadow: 1px -5px 18px #e0dcdc;

        li {
            flex: 1;

            a {
                display: flex;
                flex-direction: column;
                color: #8A8A8A;
                padding: 10px 0;

                .iconfont {
                    font-size: 30px;
                }
            }

            .active {
                color: #4294FF
            }
        }
    }
}

// 去掉所有滚动条效果 
::-webkit-scrollbar {
    width: 0;
}



.main-o {
    height: 110px;
    line-height: 40px;

    #kil {
        font-size: 44px;
        color: #4294FF;
    }
}

.map {
    height: 370px;
    background: url(../../assets/imgs/66.jpg) no-repeat;
    background-size: 100%;

    .map-t {
        .FF {
            background-color: #4294FF;
        }

        div {
            height: 40px;
            width: 100px;
            line-height: 40px;
            border-radius: 20px;
            background-color: #9CBCE2;
        }
    }

    .map-g {
        height: 190px;
        width: 190px;
        line-height: 190px;
        color: #1592CC;
        margin: 35px auto 0px;
    }

    .map-b {
        div {
            height: 50px;
            width: 50px;
            line-height: 50px;

            .iconfont {
                font-size: 30px;
            }
        }

        .mapbs {
            height: 40px;
            width: 170px;
            border-radius: 20px;
            line-height: 40px;
            .icon-rightarrow {
                font-size: 20px;
            }
        }
    }
}